require('../../assets/css/index.less')
require('./revise-user.less')
require('../../assets/js/property')
// 引入axios工具
const request = require('../../intils/reques')
// 服务器地址
const url = 'http://fitness.h5.itsource.cn:3701'

window.onload = () => {
  // 获取用户信息
  function getUser() {
    request.get('/api/user/info')
      .then(res => {
        // 解构数据
        // console.log(res.data);
        let { data, errno } = res.data
        console.log(res.data);
        if (errno === 0) {
          // 渲染页面
          xuanR(data)

        }

      })
  }
  getUser();
  // 渲染函数
  function xuanR(data) {
    // 图片地址=服务器地址+
    $('#avatar').src = url + data.imgUrl
    $('#nickname').value = data.nickName
    $('#sex').textContent = data.gender ?? '请选择性别' //空值合并
    $('#selBirthday').textContent = data.birthday ?? '请选择生日'//空值合并
    $('#text').value = data.sign



  }

  // 点击头像触发input点击事件
  $('#avatar').addEventListener('click', () => {
    $('#avatarIpt').click()
  })

  //   监听更换头像
  $('#avatarIpt').addEventListener('change', e => {
    // console.log(e.target.files[0]);
    // 创建formData实例对象 添加文件
    const formData = new FormData()
    formData.append('file', e.target.files[0])
    // 发送请求
    request.post('/api/circles/uploadImg', formData)
      .then(res => {
        let { data, errno } = res.data
        if (errno === 0) {
          $('#avatar').src = url + data.url
        }
      })



  })



  //获取dom
  const showPicker = document.querySelector('#showPicker')
  showPicker.addEventListener('click', () => {
    weui.picker(
      [
        {
          label: '男',
          value: 0,
        },
        {
          label: '女',
          value: 1,
        },
      ],
      {
        onChange: function (result) {
          console.log(result)
        },
        onConfirm: function (result) {
          $('#sex').textContent = result[0].label

        },
        title: '性别选择',
      }
    )
  })

  //获取dom
  const showDatePicker = document.querySelector('#showDatePicker')

  //监听下拉点击
  showDatePicker.addEventListener('click', () => {

    weui.datePicker({
      start: 1990,
      end: new Date().getFullYear(),
      onChange: function (result) {
        console.log(result)
      },
      onConfirm: function (result) {
        $('#selBirthday').textContent = result.map(v => String(v.value).padStart(2, '0')).join('-')
      },
      title: '多列选择器',
    })
  })


  // 定义一个空数据，保存省份
  let city = []
  // 定义一个空字符串保存选中省份的id
  let provinceId1 = ''
  // 获取省份
  function getPro() {
    request.get('api/shared/province')
      .then(res => {
        let { errno, data } = res.data
        if (errno === 0) {
          city = data.map(v => {
            return {
              label: v.name,
              value: v.id

            }
          })
        }
      })
  }
  getPro();

  // 省份选择器
  $('#showProvince').addEventListener('click', () => {
    weui.picker(city, {
      //确定才选中
      onConfirm: function (result) {
        // console.log(result)
        $('#province').textContent = result[0].label
        getCity(result[0].value)
        provinceId1 = result[0].value
        //获取城市信息
        getCity(result[0].value)
      },
      title: '省份选择',
    })
  })


  // // 定义一个空数据，保存城市
  // let city2 = []
  // 定义一个空字符串保存选中城市的id
  let cityId1 = ''
  // 获取城市
  let pickerOldHandler = null //用于储存上一次的 弹窗函数
  function getCity(provinceId) {
    request.get('/api/shared/city', {
      params: {
        provinceId
      }
    })
      .then(res => {
        console.log(res);
        let { errno, data } = res.data

        if (errno === 0) {
          //处理数据
          let citys = data.map(v => ({ label: v.name, value: v.id }))
          // 城市选择器
          function handler() {
            weui.picker(citys, {
              //确定才选中
              onConfirm: function (result) {
                // console.log(result)
                $('#city').textContent = result[0].label
                cityId1 = result[0].value

              },
              title: '城市选择',

            })
          }
          //清除上一次的点击事件
          $('#showCity').removeEventListener('click', pickerOldHandler)
          //把这一次的弹窗函数 赋值给外层变量.使得pickerOldHandler进入闭包存储起来
          pickerOldHandler = handler
          //获取数据之后 再绑定选择器 渲染内容
          $('#showCity').addEventListener('click', handler)
        }
      })




  }
  getCity()



  // 个性签名
  $('#text').addEventListener('input', () => {
    $('#textlenth').textContent = $('#text').value.length
  })

  // 保存更改信息，提交到后台
  $('#showTooltips').addEventListener('click', () => {
    request.post('/api/user/changeInfo', {
      nickName: $('#nickname').value,
      gender: $('#sex').textContent,
      provinceId: provinceId1,
      cityId: cityId1,
      birthday: $('#selBirthday').textContent,
      imgUrl: $('#avatar').src.replace(url, ''),
      sign: $('#text').value
    }).then(res => {
      // 上传数据成功会返回一个新的token
      let { errno, data } = res.data
      if (errno === 0) {
        // 把新的token值重新保存到本地覆盖之前的token值
        localStorage.setItem('token', 'Bearer ' + data.token)
      }

    })




  })





}